<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    .banner{
      width: 1200px;
      height: 500px;
      margin: 0 auto;
      position: relative;
      
    }
    .banner img{
      width: 100%;
      display: none;
    }
    .banner .active{
      display: block;
    }
    .icon{
      position: absolute;
      bottom: 58px;
      left: 50%;
      transform: translateX(-50%);
    }
    .icon span{
      display: inline-block;
      width: 20px;
      height: 20px;
      background-color:rgba(0, 0, 0, 0.5) ;
      color: #fff;
      text-align: center;
      line-height: 20px;
      font-size: 12px;
    }
    .icon .select{
      background-color: #fff;
      color: #000;
    }
    .left,.right{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 40px;
      height: 80px;
      line-height: 80px;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
    }
    .left{
      left: 0;
    }
    .right{
      right: 0;
    }
    .left:hover{
      cursor: pointer;
    }
    .right:hover{
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="banner">
    <div >
      <img src="../img/x1.webp" class="active">
      <img src="../img/x2.webp">
      <img src="../img/x3.webp">
      <img src="../img/x4.webp">
      <img src="../img/x5.webp">
    </div>
    <div class="icon">
      <span class="select">1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>

    </div>
    <div class="left"><</div>
    <div class="right">></div>
  </div>
  <script type="text/javascript">
    let time = null
    //每隔一段时间取点击一下right按钮
    function handle(){
       right.onclick()
    }

    time = setInterval(handle, 3000)

    // 定时器和用户交互 起冲突 定时器停止  放行用户
    let banner = document.querySelector(".banner")
    banner.onmouseenter = function(){
        clearInterval(time)
    }

    // 用户鼠标移开   打开定时器
    banner.onmouseleave = function(){
      time = setInterval(handle, 3000)
    }



   var imgs = document.querySelectorAll(".banner img")
   var spans = document.querySelectorAll(".icon span")

   for (let i = 0; i < spans.length; i++) {
    spans[i].onclick = function(){
      document.querySelector('.active').className = ""
      document.querySelector('.select').className = ""
      this.className = 'select'
      imgs[i].className = 'active'
    }
   }

   // 获取有点击事件
   let right = document.querySelector('.right')
   right.onclick = function(){
    let select = document.querySelector('.select')

    if (select.nextElementSibling == null) {
      spans[0].onclick()
    }else{
      // 当前点击右侧按钮是，相当于点击当前span的下一个兄弟元素
      select.nextElementSibling.onclick()
    }
    
   }

   // 获取左点击事件
   let left = document.querySelector('.left')
   left.onclick = function(){
    let select = document.querySelector('.select')

    if (select.previousElementSibling == null) {
      spans[4].onclick()
    }else{
      // 当前点击右侧按钮是，相当于点击当前span的上一个兄弟元素
      select.previousElementSibling.onclick()
    }
    
    
   }
  </script>
</body>
</html>